<template>
	<view class="home">
		<view class="home-H" style="background-image: url('/static/bj.png');">
			<view style="height: 88rpx;"></view>
			<view class="home-H-C pdlf25">
				<view class="flex-C">
					<view class="mgl15"><uni-icons type="location" color="#fff" size="30"></uni-icons></view>
					<view class="mgl15" style="width: 55%;"><uni-search-bar radius="25" cancelButton="none" :focus="true"></uni-search-bar></view>
					<view class="mgl15">
						<uni-icons type="scan" color="#fff" size="26"></uni-icons>
					</view>
					<view class="mgl15 flex-C">
						<uni-icons type="shop" color="#fff" size="30"></uni-icons>
						<view class="ft26 mgl10" style="color: #fff;">会员码</view>
					</view>
				</view>
			</view>
			<view style="padding: 0 80rpx;" class="mgt25">
				<image style="width: 100%;height: 50rpx;" mode="widthFix" src="/static/banner1.png"></image>
			</view>
			<view class="home-H-C-B mgt25">
				<swiper style="width: 100%;height: 320rpx;">
					<swiper-item class="pdlf25" style="width: 100%;height: 450rpx;box-sizing: border-box;">
						<image class="bdr35" style="width: 100%;height: 320rpx;" src="/static/banner2.png" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="mgt25 pdlf25">
			<view class="flex-C flex-wrap">
				<view v-for="(item,index) in cate" :key="index" class="flex-C flex-column mgb15" style="width: 20%;">
					<image style="height: 75rpx;width: 75rpx;" :src="item.url" mode="aspectFill"></image>
					<view class="mgt15 ft26" style="text-align: center;color: #666666;">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="mgt25 pdlf25 flex-C">
			<view style="width: 45%;" class="mgr15">
				<image class="bdr35" mode="aspectFill" style="height: 340rpx;width: 100%;" src="../../static/img/l1.png"></image>
			</view>
			<view class="flex flex-column" style="width: 55%;">
				<image mode="aspectFill" style="height: 155rpx;width: 100%;" class="mgb25 bdr35" src="../../static/img/r1.png"></image>
				<image mode="aspectFill" style="height: 155rpx;width: 100%;" class="bdr35" src="../../static/img/r2.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	const cate = ref([
		{ name: "名片专区", url: "../../static/img/category/1.png" },
		{ name: "VIP专区", url: "../../static/img/category/2.png" },
		{ name: "女装", url: "../../static/img/category/3.png" },
		{ name: "潮流鞋靴", url: "../../static/img/category/4.png" },
		{ name: "珠宝首饰", url: "../../static/img/category/5.png" },
		{ name: "组合套餐", url: "../../static/img/category/6.png" },
		{ name: "食品", url: "../../static/img/category/7.png" },
		{ name: "男装", url: "../../static/img/category/8.png" },
		{ name: "鞋包皮具", url: "../../static/img/category/9.png" },
		{ name: "厨房家电", url: "../../static/img/category/10.png" }
	])
</script>

<style scopd lang="scss">
	page {
		background: #F5F5F5;
		box-sizing: border-box;
		width: 100vw;
	}

	.home {
		width: 100vw;

		.home-H {
			min-height: 400rpx;
			max-height: 420;
			background-position: center;
			background-size: cover;
			width: 100%;

			.home-H-C {
				width: 100%;

				.home-H-C-B {
					width: 100%;
					box-sizing: border-box;
				}
			}
		}
	}
</style>